<!-- 组件说明：人力资源需求表那个页面 -->
<template>
  <!-- 发布招聘信息的对话框，弹出层 -->
  <el-dialog
    title="招聘详情"
    :visible.sync="addZpDialogVisible"
    width="30%"
    :before-close="closeDialog"
    :fullscreen="true"
    style="text-align: center;
    font-size: 25px;"
  >
    <el-form
      :model="zhaopinForm"
      ref="zhaopinFormRef"
      :rules="zhaopinFormRules"
    >
      <div class="fabu-wrapper">
        <div class="tou">
          <!-- 部门和日期 -->
          <div class="bumen-and-data-wrapper">
            <div class="bumen">
              <span>部门:</span>
              <el-form-item prop="bumen">
                <el-input
                  v-model="zhaopinForm.bumen"
                  size="normal"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="data">
              <span>日期:</span>
              <el-form-item prop="data">
                <el-date-picker
                  v-model="zhaopinForm.data"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- 下边主要内容 -->
        <div class="content">
          <!-- 招聘岗位名称和拟聘人数所在的行 -->
          <div class="row-gangwei">
            <div class="gangwei-wrapper">
              <span class="gangwei-text">招聘岗位名称:</span>
              <el-form-item prop="gangwei">
                <el-input
                  v-model="zhaopinForm.gangwei"
                  size="normal"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="num">
              <div class="num-text">拟聘人数:</div>
              <el-form-item prop="num">
                <el-input
                  v-model="zhaopinForm.num"
                  size="normal"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 申请事由，与到岗时间所在的行 -->
          <div class="row-reason">
            <!-- 申请事由 -->
            <div class="reason">
              <div class="reason-text">申请事由:</div>
              <div class="reason-reason">
                <el-form-item prop="shiyou">
                  <el-autocomplete
                    prop="reason"
                    class="inline-input"
                    v-model="zhaopinForm.shiyou"
                    :fetch-suggestions="querySearch"
                  ></el-autocomplete>
                </el-form-item>
              </div>
            </div>
            <!-- 到岗时间 -->
            <div class="daogangdata">
              <div class="daogangdata-text">到岗时间:</div>
              <el-form-item prop="daogangdata">
                <el-input
                  v-model="zhaopinForm.daogangdata"
                  size="normal"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 招聘资格要求 -->
          <div class="yaoqiu-wrapper">
            <div class="yaoqiu-left">资格要求</div>
            <div class="yaoqiu-right">
              <div class="row-xueli">
                <!-- 学历 -->
                <div class="xueli">
                  <div class="xueli-text">学历:</div>
                  <el-form-item prop="xueli">
                    <el-input
                      v-model="zhaopinForm.xueli"
                      size="normal"
                      clearable
                    ></el-input>
                  </el-form-item>
                </div>
                <!-- 专业 -->
                <div class="zhuanye">
                  <div class="zhuanye-text">专业:</div>
                  <el-form-item prop="zhuanye">
                    <el-input
                      v-model="zhaopinForm.zhuanye"
                      size="normal"
                      clearable
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="row-gender">
                <div class="gender">
                  <div class="gender-text">性别:</div>
                  <el-form-item prop="gender">
                    <el-autocomplete
                      class="inline-input"
                      v-model="zhaopinForm.gender"
                      :fetch-suggestions="querySearchGender"
                    ></el-autocomplete>
                  </el-form-item>
                </div>
                <div class="age">
                  <div class="age-text">年龄:</div>
                  <el-form-item prop="age">
                    <el-input
                      v-model="zhaopinForm.age"
                      size="normal"
                      clearable
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="salary">
                  <div class="salary-text">拟聘薪资:</div>
                  <el-form-item prop="salary">
                    <el-input
                      v-model="zhaopinForm.salary"
                      size="normal"
                      clearable
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="experience">
                <div class="experience-text">工作经验要求</div>
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="zhaopinForm.experience"
                ></el-input>
              </div>
              <div class="skill">
                <div class="skill-text">知识与技能要求</div>
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="zhaopinForm.skill"
                > </el-input>
              </div>
            </div>
          </div>
          <!-- 拟聘岗位工作职责 -->
          <div class="zhizhe-wrapper">
            <div class="zhizhe-left">拟聘岗位<br />工作职责</div>
            <div class="zhizhe-right">
              <div class="zhizhe-right-text">注：如非新增岗位，只需注明”见XX岗位“</div>
              <el-input
                type="textarea"
                :rows="3"
                v-model="zhaopinForm.zhize"
              > </el-input>
            </div>
          </div>
          <!-- 备注 -->
          <div class="beizhu">
            <div class="beizhu-left">备注</div>
            <div class="beizhu-right">
              <el-input
                type="textarea"
                :rows="3"
                v-model="zhaopinForm.remark"
              > </el-input>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <div class="footer">
      <span slot="footer">
        <el-button @click="setAddZpDialogVisible(false)">
          <span v-if="isAdd">取消发布</span>
          <span v-else>取消修改</span>
        </el-button>
        <el-button
          type="primary"
          @click="checkZp('zhaopinFormRef')"
        >
          <span v-if="isAdd">发布</span>
          <span v-else>修改</span>
        </el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  data () {
    return {
      // 申请事由的输入建议
      restaurantsShiYou: [],
      // 性别的输入建议
      restaurantsGender: [],
      // TODO 校验规则，先做这几个，后面再做
      zhaopinFormRules: {
        bumen: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        data: [{ required: true, message: '请输入日期', trigger: 'blur' }],
        gangwei: [{ required: true, message: '请输入招聘岗位名称', trigger: 'blur' }],
        num: [{ required: true, message: '请输入拟聘人数', trigger: 'blur' }],
        shiyou: [{ required: true, message: '请输入申请事由', trigger: 'blur' }],
        daogangdata: [{ required: true, message: '请输入到岗时间', trigger: 'blur' }],
        xueli: [{ required: true, message: '请输入学历', trigger: 'blur' }],
        zhuanye: [{ required: true, message: '请输入专业', trigger: 'blur' }],
        gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }]
      },
      // 时间选择器需要的参数
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < (Date.now() - 24 * 60 * 60 * 1000)
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '明天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周后',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  mounted () {
    this.restaurantsShiYou = this.loadAll()
    this.restaurantsGender = this.loadAllGender()
  },
  methods: {
    // 校验招聘表填写是否符合规则
    checkZp (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addOrUpdateZp()
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    // 发请求，将填写的信息存储到数据库中
    async addOrUpdateZp () {
      console.log(this.zhaopinForm)
      const {
        bumen,
        data,
        gangwei,
        num,
        shiyou,
        daogangdata,
        xueli,
        zhuanye,
        gender,
        age,
        salary,
        experience,
        skill,
        zhize,
        remark
      } = this.zhaopinForm
      if (!this.isAdd) {
        // 更新数据
        console.log('更新招聘')
        const res = await this.$http.post('/zp/update', {
          id: this.zhaopinForm.id,
          bumen,
          data,
          gangwei,
          num,
          shiyou,
          daogangdata,
          xueli,
          zhuanye,
          gender,
          age,
          salary,
          experience,
          skill,
          zhize,
          remark
        })
        if (res.data.error_code === 0) {
          this.$message.success(res.data.msg)
          // TODO 更新this.zpList中的数据，添加记录后也要更新数据
          // this.setZhaopinForm()
          this.setAddZpDialogVisible(false)
        }
      } else {
        // 新增数据
        console.log('新增招聘')
        const res = await this.$http.post('/zp/add', {
          bumen,
          data,
          gangwei,
          num,
          shiyou,
          daogangdata,
          xueli,
          zhuanye,
          gender,
          age,
          salary,
          experience,
          skill,
          zhize,
          remark
        })
        console.log(res.data)
        if (res.data.error_code === 0) {
          this.$message.success('招聘信息发布成功')
          this.setAddZpDialogVisible(false)
        } else {
          this.$message.error('失败')
        }
      }
    },
    // 关闭前询问用户，是否关闭，避免错误关闭
    closeDialog () {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.setAddZpDialogVisible(false)
        })
        .catch(_ => { })
    },
    // TODO 下面6个函数，有重复且功能相近，看一下是否能抽离
    // 搜索事由的搜索建议
    querySearch (queryString, cb) {
      var restaurantsShiYou = this.restaurantsShiYou
      var results = queryString ? restaurantsShiYou.filter(this.createFilter(queryString)) : restaurantsShiYou
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 申请事由的输入建议，新增岗位、后补、储备、其他
    createFilter (queryString) {
      return (restaurantsShiYou) => {
        return (restaurantsShiYou.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    // 申请事由的输入建议项
    loadAll () {
      return [
        { value: '新增岗位' },
        { value: '后补' },
        { value: '储备' },
        { value: '其他(可修改)' }
      ]
    },
    querySearchGender (queryStringGender, cb) {
      var restaurantsGender = this.restaurantsGender
      var results = queryStringGender ? restaurantsGender.filter(this.createFilterGender(queryStringGender)) : restaurantsGender
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 申请事由的输入建议，新增岗位、后补、储备、其他
    createFilterGender (queryStringGender) {
      return (restaurantsGender) => {
        return (restaurantsGender.value.toLowerCase().indexOf(queryStringGender.toLowerCase()) === 0)
      }
    },
    // 申请事由的输入建议项
    loadAllGender () {
      return [
        { value: '男' },
        { value: '女' },
        { value: '男、女皆可' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
.el-dialog__header {
  text-align: center !important;
}

@media screen and (max-width: 1800px) {
  .fabu-wrapper {
    min-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
  }
}
// 对话框中的内容
.fabu-wrapper {
  /deep/ .el-form-item__error {
    top: 8px;
    left: 50px;
  }
  /deep/ .el-form-item__error:focus {
    display: none;
  }
  @include center;
  flex-direction: column;
  // width: 80%;
  margin: auto;
  max-width: 1000px;
  .tou {
    width: 100%;
    .bumen-and-data-wrapper {
      display: flex;
      justify-content: space-between;
      .bumen {
        margin-left: 10px;
        height: 30px;
        display: flex;
        overflow: hidden;
        display: flex;
        span {
          line-height: 37px;
          font-weight: 700;
        }
        .el-input /deep/ .el-input__inner {
          border: none !important;
          overflow: hidden;
          float: left;
        }
      }
      .data {
        overflow: hidden;
        height: 30px;
        span {
          line-height: 37px;
          font-weight: 700;
        }
        display: flex;
        .el-input /deep/ .el-input__inner {
          border: none !important;
          overflow: hidden;
        }
      }
    }
  }
  .content {
    border: 1px solid #000;
    box-sizing: border-box;
    width: 99%;
    .row-gangwei {
      display: flex;
      border-bottom: 1px solid #000;
      .gangwei-wrapper {
        display: flex;
        flex: 60%;
        .gangwei-text {
          padding-left: 10px;
          line-height: 38px;
          font-weight: 700;
        }
        .el-input /deep/ .el-input__inner {
          border: none !important;
          overflow: hidden;
        }
      }
      .num {
        flex: 40%;
        display: flex;
        .num-text {
          line-height: 38px;
          font-weight: 700;
        }
        .el-input /deep/ .el-input__inner {
          border: none !important;
          overflow: hidden;
        }
      }
    }
    .row-reason {
      display: flex;
      border-bottom: 1px solid #000;
      .reason {
        display: flex;
        flex: 60%;
        .reason-text {
          padding-left: 10px;
          line-height: 38px;
          font-weight: 700;
        }
        .reason-reason {
          display: flex;
          .el-radio-group {
            .el-radio {
              .el-radio__label {
                padding-left: 2px;
              }
            }
          }
          .el-autocomplete /deep/.el-input__inner {
            border: none !important;
            overflow: hidden;
          }
          .el-input {
            max-width: 80px;
          }
        }
      }
      .daogangdata {
        display: flex;
        flex: 40%;
      }
      .daogangdata-text {
        width: 100px;
        line-height: 38px;
        font-weight: 700;
      }
      .el-input /deep/ .el-input__inner {
        border: none !important;
        overflow: hidden;
      }
    }
    .yaoqiu-wrapper {
      display: flex;
      .yaoqiu-left {
        width: 88px;
        @include center;
        writing-mode: vertical-lr;
        letter-spacing: 10px;
        border-right: 1px solid #000;
      }
      .yaoqiu-right {
        // padding-left: 5px;
        width: 99%;

        .row-xueli {
          display: flex;
          .xueli {
            display: flex;
            // width: 100px;
            .xueli-text {
              font-weight: 700;
              width: 75px;
              text-align: center;
              line-height: 38px;
            }

            .el-input /deep/ .el-input__inner {
              border: none !important;
              overflow: hidden;
            }
          }
          .zhuanye {
            display: flex;
            .zhuanye-text {
              font-weight: 700;
              width: 60px;
              text-align: center;
              line-height: 38px;
            }
            .el-input /deep/ .el-input__inner {
              border: none !important;
              overflow: hidden;
            }
          }
        }
        .row-gender {
          display: flex;
          .gender {
            .el-autocomplete /deep/ .el-input__inner {
              border: none !important;
              width: 230px;
            }
            display: flex;
            .gender-text {
              font-weight: 700;
              width: 60px;
              text-align: center;
              line-height: 38px;
            }
          }
          .age {
            display: flex;
            .age-text {
              font-weight: 700;
              width: 60px;
              text-align: center;
              line-height: 38px;
            }
            .el-input /deep/ .el-input__inner {
              border: none !important;
            }
          }
          .salary {
            .el-input /deep/ .el-input__inner {
              border: none !important;
            }
            display: flex;
            .salary-text {
              font-weight: 700;
              width: 100px;
              text-align: center;
              line-height: 38px;
            }
          }
        }
        .experience {
          margin-top: 10px;
          border-top: 1px solid #000;
          .experience-text {
            font-weight: 700;
            margin: 10px;
            text-align: left;
          }
          .el-textarea /deep/ .el-textarea__inner {
            border: none;
            resize: none;
            height: 200px;
            width: 99%;
            overflow: hidden;
          }
        }

        .skill {
          .skill-text {
            font-weight: 700;
            border-top: 1px solid #000;
            padding: 10px;
            text-align: left;
          }
          .el-textarea /deep/ .el-textarea__inner {
            height: 200px;
            border: none;
            resize: none;
            width: 100%;
            overflow: hidden;
          }
        }
      }
    }
    .zhizhe-wrapper {
      display: flex;
      border-top: 1px solid #000;
      .zhizhe-left {
        @include center;
        width: 80px;
        border-right: 1px solid #000;
      }
      .zhizhe-right {
        padding-left: 5px;
        .zhizhe-right-text {
          font-size: 8px;
          color: #ccc;
          text-align: left;
        }
        .el-textarea /deep/ .el-textarea__inner {
          height: 200px;
          border: none;
          resize: none;
          width: 800px;
          overflow: hidden;
        }
      }
    }
    .beizhu {
      display: flex;
      border-top: 1px solid #000;
      .beizhu-left {
        @include center;
        width: 80px;
        border-right: 1px solid #000;
      }
      .beizhu-right {
        padding-left: 5px;
        .el-textarea /deep/ .el-textarea__inner {
          height: 100px;
          width: 800px;
          border: none;
          resize: none;
          overflow: hidden;
        }
      }
    }
  }
}
.footer {
  margin-left: 810px;
  margin-top: 10px;
}
</style>
